<template>
  <el-dialog
    title="试题预览"
    :visible.sync="showDialog"
    width="60%"
    :close-on-click-modal="false"
    @close="showDialog=false"
  >
    <el-divider>基本信息</el-divider>
    <el-descriptions :column="4">
      <el-descriptions-item label="试题编号">{{ testBankDetail.quest_num }}</el-descriptions-item>
      <el-descriptions-item label="试题类型">
        <span v-if="testBankDetail.quest_type===1">单选题</span>
        <span v-if="testBankDetail.quest_type===2">多选题</span>
        <span v-if="testBankDetail.quest_type===3">判断题</span>
        <span v-if="testBankDetail.quest_type===4">简答题</span>
      </el-descriptions-item>
      <el-descriptions-item label="归属学科">{{ testBankDetail.subject_name }}</el-descriptions-item>
      <el-descriptions-item label="归属目录">{{ testBankDetail.directory_name }}</el-descriptions-item>
      <el-descriptions-item v-if="testBankDetail.tag_info?.length" label="标签信息">{{ testBankDetail.tag_info.join(',') }}</el-descriptions-item>
      <el-descriptions-item v-else label="标签信息">暂无</el-descriptions-item>
      <el-descriptions-item label="发布状态">
        <el-tag v-if="testBankDetail.show_state===1" type="success">上架</el-tag>
        <el-tag v-if="testBankDetail.show_state===2" type="info">下架</el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="审核人">暂无</el-descriptions-item>
      <el-descriptions-item label="审核状态">
        <el-tag v-if="testBankDetail.check_state===1">待审核</el-tag>
        <el-tag v-if="testBankDetail.check_state===2" type="success">通过</el-tag>
        <el-tag v-if="testBankDetail.check_state===3" type="danger">不通过</el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="审核意见">{{ testBankDetail.check_remarks||'暂无' }}</el-descriptions-item>
      <el-descriptions-item label="创建人">{{ testBankDetail.create_name }}</el-descriptions-item>
      <el-descriptions-item label="难度系数">
        <span v-if="testBankDetail.difficulty===1">简单</span>
        <span v-if="testBankDetail.difficulty===2">中等</span>
        <span v-if="testBankDetail.difficulty===3">较难</span>
      </el-descriptions-item>
      <el-descriptions-item label="发布时间">{{ testBankDetail.created_at }}</el-descriptions-item>
    </el-descriptions>
    <el-divider>试题信息</el-divider>
    <el-descriptions :column="1">
      <el-descriptions-item>
        <template name="label">
          题干信息:
          <el-link
            type="primary"
            style="line-height:0;padding:0;margin:0;"
            v-html="testBankDetail.question"
          />
        </template>
      </el-descriptions-item>
      <el-descriptions-item label="选项信息">
        <template name="label">
          <span v-if="checkboxList===[]||checkboxList==='[]'">简答题,无选项</span>
          <el-checkbox v-for="item,index in checkboxList" v-else :key="index" :value="item.is_true" :label="item.code+item.content" />
        </template>
      </el-descriptions-item>
    </el-descriptions>
    <el-divider>答案信息</el-divider>
    <el-descriptions :column="1">
      <el-descriptions-item label="正确答案">
        <template name="label">
          <div v-html="testBankDetail.quest_answer" />
        </template>
      </el-descriptions-item>
      <el-descriptions-item label="答案解析">
        <template name="label">
          <div v-html="testBankDetail.quest_remark" />
        </template>
      </el-descriptions-item>
    </el-descriptions>
  </el-dialog>
</template>

<script>
export default {
  name: 'ShowTestBank',
  props: {
    // 题库详情
    testBankDetail: {
      type: Object,
      default: () => {}
    },
    // 选项信息
    checkboxList: {
      type: [Array, String],
      default: () => []
    }
  },
  data() {
    return {
      showDialog: false
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-dialog__header{
  border-bottom:1px solid #ccc;
}
 .testContent{
  display: flex;
  justify-content:space-between;
  align-items: center;
 }
</style>
